<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="跑起来" @click="running" />
        <input type="button" value="留下来" @click="stop"/>
        <h4>{{msg}}</h4>
    </div>

    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                msg:'一二三四五，上山打老虎',
                intervalId : null //定时器的id

            },
            methods:{

                running(){
                    //根据是否包含intervalId来判断是否已经点击过运行按钮
                    if(this.intervalId != null){
                        return;
                    }
                    //定时任务
                    //注意：使用箭头函数，即在setInterval中的this代表的也是vue实例
                    this.intervalId = setInterval( () => {
                        //this代表当前vue实例
                        var start = this.msg.substr(0,1);
                        var end = this.msg.substr(1);
                        this.msg = end + start;
                    },400);
                },
                stop(){
                    clearInterval(this.intervalId);
                    //停止时，清除intervalId
                    this.intervalId = null;
                }
            }
        });
    </script>

</body>
</html>